<!-- 我的钱包 -->
<template>
  <s-layout class="wallet-wrap" title="钱包">
    <!-- 钱包卡片 -->
    <view class="header-box ss-flex ss-row-center ss-col-center">
      <view class="card-box ui-BG-Main ui-Shadow-Main">
        <view class="card-head ss-flex ss-col-center">
          <view class="card-title ss-m-r-10">钱包余额（元）</view>
          <view
            @tap="state.showMoney = !state.showMoney"
            class="ss-eye-icon"
            :class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
          />
        </view>
        <view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
          <view class="money-num">{{
            state.showMoney ? fen2yuan(userWallet.balance) : '*****'
          }}</view>
          <button class="ss-reset-button topup-btn" @tap="goToRecharge">
            充值
          </button>
        </view>
      </view>
    </view>

    <su-sticky>
      <!-- 统计 -->
      <view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
        <uni-datetime-picker
          v-model="state.date"
          type="daterange"
          @change="onChangeTime"
          :end="state.today"
        >
          <button class="ss-reset-button date-btn">
            <text>{{ dateFilterText }}</text>
            <text class="cicon-drop-down ss-seldate-icon"></text>
          </button>
        </uni-datetime-picker>
        <view class="total-box">
          <view class="ss-m-b-10">总收入￥{{ fen2yuan(state.summary.totalIncome) }}</view>
          <view>总支出￥{{ fen2yuan(state.summary.totalExpense) }}</view>
        </view>
      </view>
      <su-tabs
        :list="tabMaps"
        @change="onChange"
        :scrollable="false"
        :current="state.currentTab"
      ></su-tabs>
    </su-sticky>
    <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />

    <!-- 钱包记录 -->
    <view v-if="state.pagination.total > 0">
      <view
        class="wallet-list ss-flex border-bottom"
        v-for="item in state.pagination.list"
        :key="item.id"
      >
        <view class="list-content">
          <view class="title-box ss-flex ss-row-between ss-m-b-20">
            <text class="title ss-line-1">
              {{ item.title }}
            </text>
            <view class="money">
              <text v-if="item.price >= 0" class="add">+{{ fen2yuan(item.price) }}</text>
              <text v-else class="minus">{{ fen2yuan(item.price) }}</text>
            </view>
          </view>
          <text class="time">
            {{ formatTime(item.createTime) }}
          </text>
        </view>
      </view>
    </view>
    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
    />
  </s-layout>
</template>

<script>
import dayjs from 'dayjs';
import _ from 'lodash-es';
import PayWalletApi from '@/sheep/api/pay/wallet';

export default {
  data() {
    return {
      state: {
        showMoney: false,
        date: [], // 筛选的时间段
        currentTab: 0,
        pagination: {
          list: [],
          total: 0,
          pageNo: 1,
          pageSize: 8,
        },
        summary: {
          totalIncome: 0,
          totalExpense: 0,
        },
        loadStatus: '',
        today: '',
      },
      tabMaps: [
        {
          name: '全部',
          value: '',
        },
        {
          name: '收入',
          value: '1',
        },
        {
          name: '支出',
          value: '2',
        },
      ],
      userWallet: {
        balance: 0
      }
    }
  },
  computed: {
    dateFilterText() {
      if (this.state.date[0] === this.state.date[1]) {
        return this.state.date[0];
      } else {
        return this.state.date.join('~');
      }
    }
  },
  onLoad() {
    this.state.today = dayjs().format('YYYY-MM-DD');
    this.state.date = [this.state.today, this.state.today];
    this.getLogList();
    this.getSummary();
    this.getWallet();
  },
  onReachBottom() {
    if (this.state.loadStatus === 'noMore') {
      return;
    }
    this.state.pagination.pageNo++;
    this.getLogList();
  },
  methods: {
    // 分转元
    fen2yuan(price) {
      return (Number(price) / 100).toFixed(2);
    },
    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return '';
      return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
    },
    // 获取钱包信息
    async getWallet() {
      try {
        const res = await this.$api.req("/pay/wallet/get", {}, "get", "JSON", false);
        if (res.code === 0) {
          this.userWallet = res.data || { balance: 0 };
        }
      } catch (error) {
        console.error('获取钱包信息失败', error);
      }
    },
    // 获得钱包记录分页
    async getLogList() {
      this.state.loadStatus = 'loading';
      try {
        const params = {
          pageNo: this.state.pagination.pageNo,
          pageSize: this.state.pagination.pageSize,
          type: this.tabMaps[this.state.currentTab].value,
          'createTime[0]': this.state.date[0] + ' 00:00:00',
          'createTime[1]': this.state.date[1] + ' 23:59:59',
        };
        
        const res = await this.$api.req("/pay/wallet-transaction/page", params, "get", "JSON", false);
        if (res.code === 0) {
          const data = res.data || {};
          const list = data.list || [];
          if (this.state.pagination.pageNo === 1) {
            this.state.pagination.list = list;
          } else {
            this.state.pagination.list = _.concat(this.state.pagination.list, list);
          }
          this.state.pagination.total = data.total || 0;
          this.state.loadStatus = this.state.pagination.list.length < this.state.pagination.total ? 'more' : 'noMore';
        }
      } catch (error) {
        console.error('获取钱包记录失败', error);
        this.state.loadStatus = 'noMore';
      }
    },
    // 获得钱包统计
    async getSummary() {
      try {
        const params = {
          'createTime[0]': this.state.date[0] + ' 00:00:00',
          'createTime[1]': this.state.date[1] + ' 23:59:59',
        };
        
        const res = await this.$api.req("/pay/wallet-transaction/get-summary", params, "get", "JSON", false);
        if (res.code === 0) {
          this.state.summary = res.data || { totalIncome: 0, totalExpense: 0 };
        }
      } catch (error) {
        console.error('获取钱包统计失败', error);
      }
    },
    // 处理 tab 切换
    onChange(e) {
      this.state.currentTab = e.index;
      // 重新加载列表
      this.state.pagination.pageNo = 1;
      this.state.pagination.list = [];
      this.getLogList();
      this.getSummary();
    },
    // 处理时间筛选
    onChangeTime(e) {
      const dates = Array.isArray(e) ? e : (e.detail ? e.detail.value : []);
      if (dates && dates.length >= 2) {
        this.state.date[0] = dates[0];
        this.state.date[1] = dates[dates.length - 1];
      }
      // 重新加载列表
      this.state.pagination.pageNo = 1;
      this.state.pagination.list = [];
      this.getLogList();
      this.getSummary();
    },
    // 跳转到充值页面
    goToRecharge() {
      uni.navigateTo({
        url: '../recharge/recharge'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/sheep/scss/_var.scss';
  // 钱包
  .header-box {
    background-color: $white;
    padding: 30rpx;

    .card-box {
      width: 100%;
      min-height: 300rpx;
      padding: 40rpx;
      background-size: 100% 100%;
      border-radius: 30rpx;
      overflow: hidden;
      position: relative;
      z-index: 1;
      box-sizing: border-box;

      .card-head {
        color: $white;
        font-size: 30rpx;
      }

      .ss-eye-icon {
        font-size: 40rpx;
        color: $white;
      }

      .money-num {
        font-size: 70rpx;
        line-height: 70rpx;
        font-weight: 500;
        color: $white;
        font-family: OPPOSANS;
      }

      .topup-btn {
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 30px;
        font-size: 26rpx;
        font-weight: 500;
        background-color: $white;
        color: var(--ui-BG-Main);
      }
    }

  }

  // 筛选
  .filter-box {
    height: 114rpx;
    background-color: $bg-page;

    .total-box {
      font-size: 24rpx;
      font-weight: 500;
      color: $dark-9;
    }

    .date-btn {
      background-color: $white;
      line-height: 54rpx;
      border-radius: 27rpx;
      padding: 0 20rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: $dark-6;

      .ss-seldate-icon {
        font-size: 50rpx;
        color: $dark-9;
      }
    }
  }

  // 钱包记录
  .wallet-list {
    padding: 30rpx;
    background-color: #ffff;

    .list-content {
      justify-content: space-between;
      align-items: flex-start;
      flex: 1;

      .title {
        font-size: 28rpx;
        color: $dark-3;
        width: 400rpx;
      }

      .time {
        color: $gray-c;
        font-size: 22rpx;
      }
    }

    .money {
      font-size: 28rpx;
      font-weight: bold;
      font-family: OPPOSANS;
      .add {
        color: var(--ui-BG-Main);
      }

      .minus {
        color: $dark-3;
      }
    }
  }
</style>

